<script setup lang="ts">
import Search from '~/components/home/Search.vue'
import { useHeader } from '~/composables/header'
import { useLocale } from '~/composables/locale'
import { useGlobalStore } from '~/composables/global'

const store = useGlobalStore()
const { t } = useLocale()
const { company }: { company: any } = storeToRefs(store)
const { resolveImgURL } = useGlobalStore()
const route = useRoute()
const router = useRouter()
const { mode, style, searchVisible, toggleSearch, changeSearch } = useHeader()

const curPath = ref(route.path)
router.afterEach((to) => {
  curPath.value = to.path
  changeSearch(false)
})
const { toggleLocale } = useLocale()

const menus = ref<{ name: string, link: string, active?: boolean }[]>([
  { name: t('menu.home'), link: '/' },
  { name: t('menu.about_us'), link: '/about' },
  { name: t('menu.products'), link: '/product' },
  { name: t('menu.cases'), link: '/examples' },
  { name: t('menu.news'), link: '/news' },
  { name: t('menu.contact_us'), link: '/contact' },
])

const menuList = computed(() => {
  return menus.value.map((e) => {
    if (e.link === curPath.value)
      return { ...e, active: true }

    return { ...e, active: false }
  })
})

function onSearch(k: string) {
  if (k) {
    router.push({
      path: '/search',
      query: { q: k },
    })
    changeSearch(false)
  }
}

function onSearchClick() {
  if (route.path === '/search') {
    changeSearch(false)
    return
  }
  toggleSearch()
}

const isShow = ref(false)
function handleClose() {
  isShow.value = false
}
</script>

<template>
  <header :style="style" class="h-[var(--header-height)] uppercase max-md:h-[50px]">
    <div class="h-full flex items-center justify-between max-md:h-[50px]">
      <div class="flex items-center" m="l-[70px] max-md:l-[var(--padding-x-wrap-md)]" w="[200px] max-md:[120px]" h="[50px] max-md:[50px]" animate="fade-in-left">
        <NuxtLink to="/">
          <img v-show="mode === 'transparent'" :src="resolveImgURL(company?.logo_url)" />
          <img v-show="mode === 'light'" :src="resolveImgURL(company?.logo2_url)" />
        </NuxtLink>
      </div>
      <!-- pc -->
      <nav class="h-full items-center max-md:hidden md:flex">
        <ul class="menus text-[18px]">
          <li
            v-for="(menu, index) in menuList"
            :key="menu.link"
            class="animate-fade-in-up animate-duration-500 animate-forwards px-[33px] opacity-0"
            :class="[{ active: menu.active }, menu.active ? ['after:bottom-[20px] after:w-[18px] after:h-[4px] after:rounded-[40px]'] : []]"
            :style="{ animationDelay: `${100 * index}ms` }"
          >
            <NuxtLink :to="menu.link">
              {{ menu.name }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
      <div class="h-full flex items-center max-md:hidden">
        <div class="w-[40px] cursor-pointer text-center text-[18px]" @click="toggleLocale">
          {{ $t('switch_lang') }}
        </div>
        <div class="ml-[30px] h-full w-[90px] flex items-center justify-center bg-[var(--primary-color)]" @click="onSearchClick">
          <img class="h-[24px] w-[24px]" src="~assets/img/icon_search_outline_light.png" />
        </div>
      </div>
      <!-- moblie -->
      <div class="hidden max-md:block" m="r-[var(--padding-x-wrap-md)]" @click="isShow = true">
        <NuxtLink to="/">
          <img v-show="mode === 'transparent'" src="~/assets/img/menu.png" alt="" class="max-md:block max-md:w-[20px]">
          <img v-show="mode === 'light'" src="~/assets/img/menu_dark.png" alt="" class="max-md:block max-md:w-[20px]">
        </NuxtLink>
      </div>
    </div>
    <div v-show="searchVisible" class="bg-white pb-[72px] pt-[32px] max-md:hidden">
      <Search @search="onSearch" />
    </div>
  </header>
  <el-drawer
    v-model="isShow"
    :before-close="handleClose"
    size="80%"
  >
    <nav class="h-full pl-10">
      <ul class="menus">
        <li v-for="menu in menuList" :key="menu.link" class="border-b-1 border-[#bfbfbf] pl-5 text-#666 max-md:lh-[50px]" :class="{ active: menu.active }" @click="isShow = false">
          <NuxtLink :to="menu.link" class="block max-md:lh-[50px]">
            {{ menu.name }}
          </NuxtLink>
        </li>
      </ul>
      <div class="flex justify-center">
        <el-radio-group :model-value="$t('switch_lang')" size="middle" class="pt-10" @change="toggleLocale">
          <el-radio-button label="EN" value="EN" />
          <el-radio-button label="中文" value="中文" />
        </el-radio-group>
      </div>
    </nav>
  </el-drawer>
</template>

<style type="postcss" scoped>
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all 0.2s ease-in-out;

  .menus {
    display: flex;
    height: 100%;

    li {
      display: flex;
      align-items: center;
      position: relative;
      &:hover {
        color: var(--primary-color);
      }
      &.active {
        color: var(--primary-color);
        &::after {
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background: var(--primary-color);
        }
      }
    }
  }
}
</style>
